<template>
	<view class="app">
		<view class="page-tit row">
			<text class="f-m">提现金额</text>
			<text class="tip">（ 最少提现金额：{{ (withdrawSetting && withdrawSetting.minAmount) || 1 }}元)</text>
		</view>
		<view class="input-wrap pwd-wrap row b-b">
			<input class="input" v-model="params.withdrawDepositAmount" type="number" maxlength="6" placeholder="提现金额" placeholder-style="color:#999;font-size:30rpx" />
		</view>
		<view class="page-tit row"><text class="f-m">真实姓名</text></view>
		<view class="input-wrap pwd-wrap row b-b"><input class="input" v-model="params.realName" placeholder="真实姓名" placeholder-style="color:#999;font-size:30rpx" /></view>
		<view class="page-tit row"><text class="f-m">支付宝账户</text></view>
		<view class="input-wrap pwd-wrap row b-b">
			<input class="input" v-model="params.accountCode" placeholder="支付宝账户" placeholder-style="color:#999;font-size:30rpx" />
		</view>
		<view class="page-tit row">
			<text @click="handleGetCode" v-if="!codeDisable" style="color: #3992ff;" class="f-m">获取短信验证码</text>
			<text v-else class="f-m">获取短信验证码</text>
		</view>
		<view class="input-wrap row b-b">
			<input class="input" v-model="params.msgCode" type="number" maxlength="6" placeholder="短信验证码" placeholder-style="color:#999;font-size:30rpx" />
		</view>

		<!-- <view class="code">获取验证码</view> -->
		<view class="button-footer"><tui-button type="primary" shadow height="88rpx" shape="circle" @click="submit">提现</tui-button></view>
		<view @click="navToRules" style="margin-top: 60upx;text-align: right;padding-right: 60upx;" class="row b-b">
			<text style="font-size: 28upx;" class="tip">提现说明</text>
		</view>
	</view>
</template>

<script>
import { withDrawDepositMsgCode, withdrawDeposit } from '@/service/mine.js';
import { mapState } from 'vuex';
import form from '@/utils/validation.js';
export default {
	data() {
		return {
			params: {
				creditedAccountType: 'alipay',
				accountCode: '',
				realName: '',
				msgCode: '',
				withdrawDepositAmount: ''
			},
			codeDisable: false
		};
	},
	computed: {
		...mapState(['withdrawSetting'])
	},
	methods: {
		async handleGetCode() {
			if (this.codeDisable) {
				return;
			}
			await withDrawDepositMsgCode({}, { loading: true });
			this.codeDisable = true;
			this.$msg('请注意查收短信');
		},
		navToRules() {
			uni.navigateTo(
				{
					url: '/pages/web/imgTest'
				},
				{
					type: 'withDeExplain',
					title: '提现说明'
				}
			);
		},
		async submit() {
			let rules = [
				{
					name: 'accountCode',
					rule: ['required'],
					msg: ['请输入支付宝账号']
				},
				{
					name: 'withdrawDepositAmount',
					rule: ['required'],
					msg: ['请输入提现金额']
				},
				{
					name: 'realName',
					rule: ['required'],
					msg: ['请输入真实姓名']
				},
				{
					name: 'msgCode',
					rule: ['required'],
					msg: ['请输入验证码']
				}
			];
			let checkRes = form.validation(this.params, rules);
			if (!checkRes) {
				await withdrawDeposit(this.params);
				this.$msg('提现成功');
				setTimeout(v => {
					uni.navigateBack({});
				}, 1000);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.app {
	padding-top: 30rpx;
}
.page-tit {
	border-bottom: 1upx dashed #e7e7ff;
	height: 80rpx;
	margin-left: 50rpx;
	font-size: 34rpx;
	color: #333;
	font-weight: 700;
}
.input-wrap {
	height: 110rpx;
	margin: 20rpx 50rpx 0;
	padding-right: 20rpx;

	&.pwd-wrap {
		position: relative;
		z-index: 100;
	}
	.input {
		flex: 1;
		font-size: 32rpx;
		color: #333;
	}
	.mix-icon {
		width: 60rpx;
		font-size: 40rpx;
		color: $base-color;
	}
	.icon-eye {
		width: auto;
		padding: 20rpx;
		font-size: 36rpx;
		color: #999;
		transform: translateX(14rpx);
	}
}
.button-footer {
	margin: 0 auto;
	width: 600upx;
}
.tip {
	margin-left: 20upx;
	color: #9a9a9a;
	text-decoration: underline;
	font-size: 24upx;
}
</style>
